<template>
    <div class="row">
        <div v-for="course in courses" class="col-md-4">
            <div class="card mb-4 shadow-sm">
                <img  class="img-fluid my_img_size " v-bind:src="course.image" alt="">
                <div class="card-body">
                    <h4 class="">{{course.name}}</h4>
                    <p class="card-text">{{course.summary}}</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="btn-group">
                            <router-link v-bind:to="'/detail?id=' + course.id" class="btn btn-outline-secondary">课程详情
                            </router-link>
                        </div>
                        <div class="text-muted">
                            <span class="badge badge-info">
                                费用:&nbsp;
                                {{course.price}}元</span>&nbsp;
                            <span class="badge badge-info">
                                报名人数:&nbsp;
                                {{course.enroll}}
                            </span>&nbsp;

                            <span class="badge badge-info">{{COURSE_LEVEL | optionKV(course.level)}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Course",
        props: {
            courses: {
                default: []
            }
        },
        data: function () {
            return {
                COURSE_LEVEL:COURSE_LEVEL
            }
        }
    }
</script>

<style scoped>
    .course h4 {
        font-size: 1.25rem;
        margin: 15px 0;
    }

    .course .text-muted .badge {
        font-size: 1rem;
    }
    .my_img_size {
        width: 330px;
        height: 202px;
    }
</style>
